﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mfAddVehicle.aspx.cs" Inherits="msBsc.WebUi.mMall.Seller.mfAddVehicle" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>地接客-车辆添加</title>
    <%=getMeta()%>
    <link href="/themes/mStyle1/css/home/base.css" rel="stylesheet" type="text/css" />
    <link href="/themes/mStyle1/css/home/release.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/themes/mStyle1/mGlobal.css" charset="gbk" />
    <%=getBodyBeforeJs()%>

    <style type="text/css">
        * {
            -webkit-box-sizing: initial;
            -moz-box-sizing: initial;
            -ms-box-sizing: initial;
            box-sizing: initial;
        }

        .required {
            color: red;
            vertical-align: middle;
        }

        ol, ul {
            list-style: outside none none;
        }

        .main-horizontal li {
            display: table;
            height: auto !important;
            min-height: 40px;
            margin-top: 15px;
            padding-bottom: 15px;
            border-bottom: 1px dashed #c7c5c5;
            width: 100%;
        }

        .control-span {
            color: #787676;
            display: block;
            float: left;
            font-family: 微软雅黑;
            font-size: 14px;
            text-align: right;
            width: 30%;
            max-width: 150px;
        }

        .controls {
            color: #333333;
            display: inline;
            float: left;
            font-family: 微软雅黑;
            font-size: 14px;
            margin-left: 15px;
            width: 50%;
        }

        .input {
            border: 1px solid #c7c5c5;
            font-size: 14px;
            height: 30px;
            width: 100%;
        }

        .help-inline {
            color: red;
            display: inline-block;
        }

        .selectInput {
            height: 30px !important;
            border: 1px solid #ccc;
            position: relative;
            width: 100%;
            margin-bottom: 10px;
        }

        .t_area {
            height: 61px;
            resize: horizontal;
        }

        .uploadImg {
            border: 1px dashed #cccccc;
            color: #cccccc;
            cursor: pointer;
            font-size: 44px;
            text-align: center;
            width: 50px;
            height: 50px;
            margin: 20px auto auto 20px;
        }

        .blue {
            background: none repeat scroll 0 0 #1a9bf2;
            border: medium none;
            border-radius: 3px;
            color: #f7f7f7;
            cursor: pointer;
            display: inline-block;
            font-size: 16px;
            font-weight: bold;
            height: 36px;
            line-height: 36px;
            padding: 0 20px;
            text-align: center;
            width: 150px;
        }

        .addImage {
            background: url("/themes/mStyle1/Image/public/addimg.png") no-repeat;
            background-size: 114px 31px;
            height: 31px;
            width: 114px;
            display: block;
            margin-bottom: 5px;
        }

        .caradd {
            display: none;
        }

       .caradd img {
                max-width: 100%;
                max-height: 300px;
            }
    </style>
</head>
<body style="margin: 0; padding: 0;">
    <div class="viewport">
        <%=msBsc.WebUi.Code.QtHtmlGet.GetWapHeaderMenuHtml(true) %>
        <div class="main">
            <ul class="main-horizontal">
                <!-- BEGIN 车辆名称 -->
                <li>
                    <span class="control-span">车辆名称<span class="required">*</span></span><div class="controls">
                        <input type="text" class="input" id="carName" />
                        <span class="help-inline" id="carNameMessage"></span>
                    </div>

                </li>
                <!-- END 车辆名称 -->

                <!-- BEGIN 车辆购买时间 -->
                <li>
                    <span class="control-span">购买时间<span class="required">*</span></span>
                    <div class="controls">
                        <input type="text" class="input laydate-icon" id="uetoTime" />
                        <span class="help-inline" id="uetoTimeMessage"></span>
                    </div>
                </li>
                <!-- END 车辆购买时间 -->

                <!-- BEGIN 车辆座位数 -->
                <li>
                    <span class="control-span">座位数(座)<span class="required">*</span></span><div class="controls">
                        <input type="text" class="input" id="numberSeats" />
                        <span class="help-inline" id="numberSeatsMessage"></span>
                    </div>
                </li>
                <!-- END 车辆座位数 -->

                <!-- BEGIN 车辆价格 -->
                <li>
                    <span class="control-span">价格(元/天起)<span class="required">*</span></span><div class="controls">
                        <input type="text" class="input" id="carPrice" />
                        <span class="help-inline" id="carPriceMessage"></span>
                    </div>
                </li>
                <!-- END 车辆价格 -->

                <!-- BEGIN 服务范围 -->
                <li>
                    <span class="control-span">服务范围<span class="required">*</span></span><div class="controls">
                        <input type="text" class="input" id="serviceRange">
                        <span class="help-inline" id="serviceRangeMessage"></span>
                    </div>
                </li>
                <!-- END 服务范围 -->

                <!-- BEGIN 车辆所属地 -->
                <li>
                    <span class="control-span">所属地区<span class="required">*</span></span>
                    <div class="controls">
                        <select id="country" class="selectInput">
                        </select>
                        <select id="city" class="selectInput">
                        </select>
                        <select id="destion" class="selectInput">
                        </select>
                        <span class="help-inline" id="areaMessage"></span>
                    </div>
                </li>
                <!-- END 车辆所属地 -->

                <!-- BEGIN 车辆类型 -->
                <li>
                    <span class="control-span">车辆类型<span class="required">*</span></span>
                    <div class="controls">
                        <select class="selectInput" id="carType">
                        </select>
                        <span class="help-inline selectFloat" id="carTypeMessage"></span>
                    </div>
                </li>
                <!-- END 车辆类型 -->

                <!-- BEGIN 车辆品牌 -->
                <li>
                    <span class="control-span">车辆品牌<span class="required">*</span></span>
                    <div class="controls">
                        <select id="carBrand" class="selectInput">
                        </select>
                        <span class="help-inline" id="carBrandMessage"></span>
                    </div>
                </li>
                <!-- END 车辆品牌 -->

                <!-- BEGIN 车辆颜色 -->
                <li>
                    <span class="control-span">车辆颜色<span class="required">*</span></span>
                    <div class="controls">
                        <select id="carColor" class="selectInput">
                        </select>
                        <span class="help-inline" id="carColorMessage"></span>
                    </div>
                </li>
                <!-- END 车辆颜色 -->

                <!-- BEGIN 服务类型 -->
                <li>
                    <span class="control-span">服务类型<span class="required">*</span></span>
                    <div class="controls">
                        <select id="serviceType" class="selectInput">
                            <option value="1">司机兼导游</option>
                            <option value="2">司机兼向导</option>
                            <option value="3">专职司机+专业导游</option>
                        </select>
                        <span class="help-inline selectFloat" id="Span1"></span>
                    </div>
                </li>
                <!-- END 服务类型 -->

                <!-- BEGIN 车辆图片 -->
                <li>
                    <span class="control-span">车辆图片<span class="required">*</span></span>
                    <div class="controls">
                        <span class="addImage">
                            <input id="btnupImg" style="opacity: 0; width: 114px; height: 31px" type="file" />
                        </span>
                        <div class="caradd">
                            <img id="uHeadImg" src="" />
                        </div>
                    </div>
                </li>
                <!-- END 车辆图片 -->

                <!-- BEGIN 车辆简介 -->
                <li>
                    <span class="control-span">车辆简介<span class="required">*</span></span>
                    <div class="controls">
                        <textarea class="input t_area" id="carIntroduction"></textarea>
                        <span class="help-inline" id="carIntroductionMessage"></span>
                    </div>
                </li>
                <!-- END 车辆简介 -->

                <!-- BEGIN 购买须知 -->
                <li>
                    <span class="control-span">购买须知<span class="required">*</span></span>
                    <div class="controls" style="height: 50px;">
                        <textarea class="input t_area" id="purchaseNotes"></textarea>
                        <span class="help-inline" id="purchaseNotesMessage"></span>
                    </div>
                </li>
                <!-- END 购买须知 -->
            </ul>

            <!-- BEGIN 添加车辆按钮 -->
            <div class="form-actions" style="height: 50px;">
                <div style="width: 150px; margin: 20px auto 0px auto;">
                    <button id="addVechicle" onclick="addVehicle(this)" class="blue" type="button">保 存</button>
                </div>

            </div>
            <!-- END 添加车辆按钮 -->
        </div>
        <%=msBsc.WebUi.Code.QtHtmlGet.GetWapMenuHtml() %>
    </div>

    <script src="/??jqPlugin/js/jquery-1.8.3.min.js,js/jBase.js,js/jBPage.js,themes/Style1/jsQt.js,jqPlugin/js/laytpl.js,jqPlugin/laydate/laydate.js,themes/wStyle1/js/comm/VerifyJs.js,themes/wStyle1/js/comm/DateInfo.js,jqPlugin/Jcrop/js/jquery.Jcrop.min.js"
        type="text/javascript"></script>
    <script src="/jqPlugin/Jcrop/js/caradd.js"></script>
    <script type="text/javascript" src="/jqPlugin/js/jBase.js"></script>
    <script type="text/javascript">
        (function () {

            compressFile("btnupImg", "uHeadImg", 600);

            $("#h_title").text("地接客-车辆添加");
            $.getMessageCount();

            var listNum = [1, 2, 3];
            var listName = ["司机兼导游", "司机兼向导", "专职司机+专业导游"];
            setArea("serviceType", listNum, listName);
            $('#country').change(function () {
                var outerInnerId = $(this).children('option:selected').val();
                if (currentOuterInnerId == outerInnerId) {
                    return;
                }
                currentOuterInnerId = outerInnerId;
                parentsId = outerInnerId;
                btnDo("getArea2");
            });
            $('#city').change(function () {
                var provinceId = $(this).children('option:selected').val();
                if (provinceId == currentProvinceId) {
                    return;
                }
                currentProvinceId = provinceId;
                parentsId = provinceId;
                btnDo("getArea3");
            });
        })();

        function compress(source_img_obj, quality, output_format) {
            var mime_type = "image/jpeg";
            if (output_format != undefined && output_format == "png") {
                mime_type = "image/png";
            }

            var cvs = document.createElement('canvas');
            //naturalWidth真实图片的宽度
            cvs.width = $(source_img_obj).width();
            cvs.height = $(source_img_obj).height();
            var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
            var newImageData = cvs.toDataURL(mime_type, quality / 100);
            var result_image_obj = new Image();
            result_image_obj.src = newImageData;
            return result_image_obj;
        };

        var start = {
            elem: '#uetoTime',
            format: 'YYYY-MM-DD',
            min: '1099-06-16 23:59:59', //设定最小日期为当前日期
            max: laydate.now(), //最大日期
            istime: true,
            istoday: false,
            choose: function (datas) {
                //end.min = datas; //开始日选好后，重置结束日的最小日期
                //end.start = datas //将结束日的初始值设定为开始日
            }
        };
        laydate(start);
        var parentsId = "00000000-0000-0000-0000-000000000000";
        var currentOuterInnerId = "";
        var currentProvinceId = "";


        function shoFileView() {
            $("#btnupImg").trigger("click");
        }

        
        function btnDo(sEbtn) {
            GtGrid1Action = sEbtn;
            var opart = GetGtParam("false");
            ajaxComm(opart);
        };

        function setArea(input, listValue, listOption) {
            var html = "";
            $(listOption).each(function (i, e) {
                html += "<option value=" + listValue[i] + ">" + e + "</option>";
            });
            $("#" + input).html(html);
        }

        function updateSelet(inputId, valueData) {
            var html = "";
            $(valueData).each(function (i, e) {
                html += "<option value=" + e.ID + " >" + e.Name + "</option>";
            });
            $("#" + inputId).html(html);
        }

        //执行AJAX调用时获取参数
        function GetGtParam(isAll) {
            var _jsParam = new jsonRow();
            _jsParam.AddCell("parentsId", parentsId);
            _jsParam.AddCell("isAll", isAll);
            _jsParam.AddCell("ACTION", GtGrid1Action);
            return _jsParam;
        };


        btnDo("initplace");


        var messages = ["*请添加车辆名称",
            "*车名不能超过40个字符,中文算2个字符",
            "*请选择购买时间",
            "*购买时间只能是日期",
            "*车辆座位数不能为空",
            "*车辆座位数只能是正整数",
            "*价格只能是两位小数的数字",
            "*价格只能是数字",
            "*服务范围不能为空",
            "*服务范围最大长度为200个字符",
            "*请选择车辆类型",
            "*请选择车辆品牌",
            "*请选择车辆颜色", "*请选择服务类型",
            "*车辆简介不能为空", "*车辆简介最大只能有500个字符",
            "*购买须知不能为空", "*购买须知最大只能有1000个字符", "*请选择完善地区信息"];
        function addVehicle() {
            //验证车名
            var carName = $("#carName").val();
            if (!vcfInputIsNull("carName", messages[0]) ||
                !vcfEnLength("carName", messages[1], 40)) {
                return;
            }
            //验证上户时间
            var uetoTime = $("#uetoTime").val();
            if (!vcfInputIsNull("uetoTime", messages[2]) ||
                !vcfDate("uetoTime", messages[3])) {
                return;
            }
            //验证车辆座位数
            var numberSeats = $("#numberSeats").val();
            if (!vcfInputIsNull("numberSeats", messages[4]) ||
                !vfcPositiveInt("numberSeats", messages[5])) {
                return;
            }
            //验证价格
            var carPrice = $("#carPrice").val();
            if (!vcfInputIsNull("carPrice", messages[6]) ||
                !vcfPositiveFloat("carPrice", messages[7])) {
                return;
            }
            //验证服务范围
            var servicesRange = $("#serviceRange").val();
            if (!vcfInputIsNull("serviceRange", messages[8]) ||
                !strLength("serviceRange", messages[9], 200)) {
                return;
            }
            //验证车辆类型
            var carType = $("#carType").children('option:selected').val();
            if (!vcfSelectIsNull("carType", true, messages[10])) {
                return;
            }
            //验证车辆品牌
            var carBrand = $("#carBrand").children('option:selected').val();
            if (!vcfSelectIsNull("carBrand", true, messages[11])) {
                return;
            }
            //验证车辆颜色
            var carColor = $("#carColor").children('option:selected').val();
            if (!vcfSelectIsNull("carColor", true, messages[12])) {
                return;
            }
            //验证服务类型
            var serviceType = $("#serviceType").children('option:selected').val();
            if (!vcfSelectIsNull("serviceType", true, messages[13])) {
                return;
            }
            //验证图片 
            var carImg = $("#uHeadImg").attr("src");
            var carIsUpdate = $("#uHeadImg").attr("for");
            if (IsNull(carImg) || IsNull(carIsUpdate)) {
                alert("车辆图片不能为空");
                return;
            }
            //验证简介
            var carIntroduction = $("#carIntroduction").val();
            if (!vcfInputIsNull("carIntroduction", messages[14]) || !strLength("carIntroduction", messages[15], 500)) {
                return;
            }
            //验证购买须知
            var purchaseNotes = $("#purchaseNotes").val();
            if (!vcfInputIsNull("purchaseNotes", messages[16]) || !strLength("purchaseNotes", messages[17], 1000)) {
                return;
            }

            //验证车辆所属地
            var countryId = "";//境内外
            var cityId = "";//省份
            var destionId = "";//市
            countryId = $("#country").children('option:selected').val();
            cityId = $("#city").children('option:selected').val();
            destionId = $("#destion").children('option:selected').val();
            if (!vcfSelectIsNull("country", false, messages[18]) ||
                !vcfSelectIsNull("city", false, messages[18]) ||
                !vcfSelectIsNull("destion", false, messages[18])) {
                return;
            }
            var opart = new jsonRow();
            opart.AddCell("carName", carName);
            opart.AddCell("uetoTime", uetoTime);
            opart.AddCell("numberSeats", numberSeats);
            opart.AddCell("carPrice", carPrice);
            opart.AddCell("servicesRange", servicesRange);
            opart.AddCell("carType", carType);
            opart.AddCell("carBrand", carBrand);
            opart.AddCell("carColor", carColor);
            opart.AddCell("serviceType", serviceType);
            opart.AddCell("carImg", carImg);
            opart.AddCell("imgName", $("#btnupImg").val());
            opart.AddCell("carIntroduction", carIntroduction);
            opart.AddCell("purchaseNotes", purchaseNotes);
            opart.AddCell("countryId", countryId);
            opart.AddCell("cityId", cityId);
            opart.AddCell("destionId", destionId);
            opart.AddCell("ACTION", "addVehicle");
            ajaxComm(opart);

            $("#addVechicle").attr('disabled', true);
            $("#addVechicle").text('提交中请稍后');
        }
        //清空车辆信息
        function ResetCar() {
            $("#carName").val("");
            $("#uetoTime").val("");
            $("#numberSeats").val("");
            $("#serviceRange").val("");
            $("#carPrice").val("");
            $("#carIntroduction").val("");
            $("#purchaseNotes").val("");
            $("#uHeadImg").attr("for", "");
            $("#uHeadImg").attr("src", "/themes/Style1/Image/u_head_110x110.png");
            $("#addVechicle").attr('disabled', false);
            $("#addVechicle").text('提 交');
        }
        //验证是否 为空
        function vcfInputIsNull(inputID, msg) {
            var $input = $("#" + inputID);
            var $nextMsg = $("#" + inputID).next();
            if (IsNull($input.val())) {
                $nextMsg.html(msg);
                $input.focus();
                return false;
            }
            $nextMsg.html("");
            return true;
        }
        //验证是否 为空
        function vcfSelectIsNull(inputID, isInt, msg) {
            var $input = $("#" + inputID);
            var $nextMsg = $("#" + inputID).parent().children().last();
            if (isInt && !NonzeroPositiveInt($input.children("option:selected").val())) {
                $nextMsg.html(msg);
                $input.focus();
                return false;
            }
            if (IsNull($input.children("option:selected").val())) {
                $nextMsg.html(msg);
                $input.focus();
                return false;
            }
            $nextMsg.html("");
            return true;
        }
        //长度验证
        function vcfEnLength(inputID, msg, maxLength) {
            var $input = $("#" + inputID);
            var $nextMsg = $("#" + inputID).next();
            if (!isEnLength($input.val(), 0, maxLength)) {
                $nextMsg.html(msg);
                $input.focus();
                return false;
            }
            $nextMsg.html("");
            return true;
        }
        //时间验证
        function vcfDate(inputID, msg) {
            var $input = $("#" + inputID);
            var $nextMsg = $("#" + inputID).next();
            if (!isdate($input.val())) {
                $nextMsg.html(msg);
                $input.focus();
                return false;
            }
            $nextMsg.html("");
            return true;
        }
        //整数验证
        function vfcPositiveInt(inputID, msg) {
            var $input = $("#" + inputID);
            var $nextMsg = $("#" + inputID).next();
            if (!NonzeroPositiveInt($input.val())) {
                $nextMsg.html(msg);
                $input.focus();
                return false;
            }
            $nextMsg.html("");
            return true;
        }
        //浮点数验证
        function vcfPositiveFloat(inputID, msg) {
            var $input = $("#" + inputID);
            var $nextMsg = $("#" + inputID).next();
            if (!IsPositiveFloat($input.val())) {
                $nextMsg.html(msg);
                $input.focus();
                return false;
            }
            $nextMsg.html("");
            return true;
        }
        //字符串 长度验证
        function strLength(inputID, msg, length) {
            var $input = $("#" + inputID);
            var $nextMsg = $("#" + inputID).next();
            if (!islength($input.val(), 0, length)) {
                $nextMsg.html(msg);
                $input.focus();
                return false;
            }
            $nextMsg.html("");
            return true;
        }
        //验证车辆图片
        function vfcImg(carImg) {
            if (IsNull(carImg)) {
                alert("车辆图片不能为空");
                return false;
            }
            return true;
        }
        function goUrl() {
            alert("添加成功！");
            window.location.href = "/ms_DjackVehicleList.htm";
        }
    </script>
</body>
</html>
